<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信商城管理系统 - 商品管理</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.min.js"></script>
    <style>
        [v-cloak] { display: none; }
        /* 确保图标正确显示 */
        .bi {
            display: inline-block;
            vertical-align: -0.125em;
        }
        
        /* 搜索框图标样式 */
        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            z-index: 1;
        }
        
        /* 搜索框内边距调整 */
        .search-input {
            padding-left: 36px !important;
        }
        
        /* 模态对话框样式 */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 50;
        }
        
        .modal-enter-active,
        .modal-leave-active {
            transition: opacity 0.3s ease;
        }
        
        .modal-enter-from,
        .modal-leave-to {
            opacity: 0;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            transform: scale(1);
            transition: transform 0.3s ease;
        }
        
        .modal-enter-from .modal-content,
        .modal-leave-to .modal-content {
            transform: scale(0.9);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div id="app" v-cloak class="flex h-screen overflow-hidden">
        <!-- 模态对话框组件 -->
        <Transition name="modal">
            <div v-if="modal.show" class="modal-backdrop" @click.self="closeModal">
                <div class="modal-content">
                    <div class="p-4 border-b">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-medium" :class="getModalHeaderClass">{{ modal.title }}</h3>
                            <button @click="closeModal" class="text-gray-400 hover:text-gray-500">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        <p>{{ modal.message }}</p>
                        <div v-if="modal.showForm" class="mt-4 space-y-4">
                            <div>
                                <label for="productName" class="block text-sm font-medium text-gray-700 mb-1">
                                    商品名称
                                </label>
                                <input 
                                    type="text" 
                                    id="productName" 
                                    v-model="modal.formData.name" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                    placeholder="请输入商品名称"
                                />
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="productPrice" class="block text-sm font-medium text-gray-700 mb-1">
                                        销售价格
                                    </label>
                                    <input 
                                        type="number" 
                                        id="productPrice" 
                                        v-model="modal.formData.price" 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                        placeholder="0.00"
                                        min="0"
                                        step="0.01"
                                    />
                                </div>
                                <div>
                                    <label for="productOriginalPrice" class="block text-sm font-medium text-gray-700 mb-1">
                                        原价
                                    </label>
                                    <input 
                                        type="number" 
                                        id="productOriginalPrice" 
                                        v-model="modal.formData.originalPrice" 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                        placeholder="0.00"
                                        min="0"
                                        step="0.01"
                                    />
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="productStock" class="block text-sm font-medium text-gray-700 mb-1">
                                        库存数量
                                    </label>
                                    <input 
                                        type="number" 
                                        id="productStock" 
                                        v-model="modal.formData.stock" 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                        placeholder="0"
                                        min="0"
                                    />
                                </div>
                                <div>
                                    <label for="productCategory" class="block text-sm font-medium text-gray-700 mb-1">
                                        商品分类
                                    </label>
                                    <select 
                                        id="productCategory" 
                                        v-model="modal.formData.categoryId" 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                    >
                                        <option v-for="category in categories" :key="category.id" :value="category.id">
                                            {{ category.name }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label for="productImage" class="block text-sm font-medium text-gray-700 mb-1">
                                    商品图片URL
                                </label>
                                <input 
                                    type="text" 
                                    id="productImage" 
                                    v-model="modal.formData.image" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                    placeholder="请输入图片URL"
                                />
                                <div v-if="modal.formData.image" class="mt-2">
                                    <img :src="modal.formData.image" class="h-20 w-20 object-cover rounded-md" alt="商品图片预览" />
                                </div>
                            </div>
                            <div>
                                <label for="productDescription" class="block text-sm font-medium text-gray-700 mb-1">
                                    商品描述
                                </label>
                                <textarea 
                                    id="productDescription" 
                                    v-model="modal.formData.description" 
                                    rows="3"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                    placeholder="请输入商品描述"
                                ></textarea>
                            </div>
                            <div class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    id="productStatus" 
                                    v-model="modal.formData.status" 
                                    class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                                    true-value="1"
                                    false-value="0"
                                />
                                <label for="productStatus" class="ml-2 block text-sm text-gray-700">
                                    上架商品
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="px-4 py-3 bg-gray-50 flex justify-end space-x-2 rounded-b-lg">
                        <button v-if="modal.showCancelButton" @click="closeModal" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            {{ modal.cancelButtonText }}
                        </button>
                        <button @click="confirmModal" :class="getModalConfirmButtonClass" class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white">
                            {{ modal.confirmButtonText }}
                        </button>
                    </div>
                </div>
            </div>
        </Transition>
        
        <!-- 侧边栏 -->
        <div :class="['bg-gray-900 text-white w-64 flex flex-col transition-all duration-300 ease-in-out', isSidebarOpen ? 'translate-x-0' : '-translate-x-64 md:translate-x-0']">
            <!-- 侧边栏头部 -->
            <div class="flex items-center justify-between px-4 py-3 bg-gray-800">
                <div class="flex items-center">
                    <img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
                    <span class="ml-2 text-xl font-semibold">商城管理系统</span>
                </div>
                <button @click="toggleSidebar" class="md:hidden text-gray-300 hover:text-white">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            
            <!-- 侧边栏菜单 -->
            <nav class="flex-1 overflow-y-auto py-4">
                <ul class="space-y-1">
                    <li>
                        <a href="dashboard.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-speedometer2 mr-3"></i>
                            <span>控制台</span>
                        </a>
                    </li>
                    <li>
                        <a href="products.html" class="flex items-center px-4 py-2 bg-gray-700 text-white">
                            <i class="bi bi-box-seam mr-3"></i>
                            <span>商品管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="categories.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-tags mr-3"></i>
                            <span>分类管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="orders.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-cart3 mr-3"></i>
                            <span>订单管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="inventory.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-clipboard-data mr-3"></i>
                            <span>库存管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="statistics.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-graph-up mr-3"></i>
                            <span>数据统计</span>
                        </a>
                    </li>
                    <li>
                        <a href="settings.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-gear mr-3"></i>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- 侧边栏底部 -->
            <div class="p-4 bg-gray-800">
                <div class="flex items-center">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像" class="h-8 w-8 rounded-full">
                    <div class="ml-3">
                        <p class="text-sm font-medium text-white">管理员</p>
                        <p class="text-xs text-gray-300">admin@example.com</p>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="login.html" class="flex items-center justify-center px-4 py-2 text-sm text-white bg-gray-700 rounded-md hover:bg-gray-600">
                        <i class="bi bi-box-arrow-left mr-2"></i>
                        退出登录
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航栏 -->
            <header class="bg-white border-b border-gray-200 shadow-sm">
                <div class="flex items-center justify-between px-4 py-3">
                    <div class="flex items-center">
                        <button @click="toggleSidebar" class="text-gray-500 focus:outline-none md:hidden">
                            <i class="bi bi-list text-xl"></i>
                        </button>
                        <h1 class="ml-4 text-lg font-semibold text-gray-700">商品管理</h1>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="text-gray-500 hover:text-gray-600 focus:outline-none">
                            <i class="bi bi-bell"></i>
                        </button>
                        <button class="flex items-center text-gray-500 hover:text-gray-600 focus:outline-none">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像" class="h-8 w-8 rounded-full">
                            <span class="ml-2 text-sm font-medium">管理员</span>
                            <i class="bi bi-chevron-down ml-1"></i>
                        </button>
                    </div>
                </div>
            </header>
            
            <!-- 页面内容 -->
            <main class="flex-1 overflow-y-auto p-4">
                <!-- 操作栏 -->
                <div class="bg-white rounded-lg shadow p-4 mb-6">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0">
                        <div class="flex flex-col md:flex-row md:items-center space-y-3 md:space-y-0 md:space-x-4">
                            <!-- 搜索框 -->
                            <div class="relative">
                                <i class="bi bi-search text-gray-400 search-icon"></i>
                                <input v-model="searchQuery" type="text" class="block w-full search-input pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="搜索商品名称、SKU或条码">
                            </div>
                            
                            <!-- 分类筛选 -->
                            <select v-model="categoryFilter" class="block w-full md:w-40 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                <option value="">全部分类</option>
                                <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
                            </select>
                            
                            <!-- 状态筛选 -->
                            <select v-model="statusFilter" class="block w-full md:w-40 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                <option value="">全部状态</option>
                                <option value="1">上架中</option>
                                <option value="0">已下架</option>
                            </select>
                        </div>
                        
                        <div class="flex space-x-2">
                            <!-- 批量操作按钮 -->
                            <div v-if="selectedProducts.length > 0" class="flex space-x-2">
                                <button @click="batchUpdateStatus(1)" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                    <i class="bi bi-check-circle mr-2"></i>
                                    批量上架
                                </button>
                                <button @click="batchUpdateStatus(0)" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                                    <i class="bi bi-x-circle mr-2"></i>
                                    批量下架
                                </button>
                                <button @click="batchDelete" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                    <i class="bi bi-trash mr-2"></i>
                                    批量删除
                                </button>
                            </div>
                            
                            <!-- 添加商品按钮 -->
                            <button @click="openAddModal" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                <i class="bi bi-plus-lg mr-2"></i>
                                添加商品
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 商品列表 -->
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        <div class="flex items-center">
                                            <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                        </div>
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品信息</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">价格</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">库存</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="product in filteredProducts" :key="product.id">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <input type="checkbox" v-model="selectedProducts" :value="product.id" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10">
                                                <img class="h-10 w-10 rounded-sm object-cover" :src="product.image" alt="">
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">{{ product.name }}</div>
                                                <div class="text-xs text-gray-500">ID: {{ product.id }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">¥{{ product.price }}</div>
                                        <div class="text-xs text-gray-500" v-if="product.originalPrice">原价: ¥{{ product.originalPrice }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ product.stock }}</div>
                                        <div class="text-xs text-gray-500">销量: {{ product.sales }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ getCategoryName(product.categoryId) }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span :class="[
                                            'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
                                            product.status === 1 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
                                        ]">
                                            {{ product.status === 1 ? '上架中' : '已下架' }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button @click="editProduct(product)" class="text-indigo-600 hover:text-indigo-900 mr-3">编辑</button>
                                        <button @click="toggleStatus(product)" :class="[product.status === 1 ? 'text-gray-600 hover:text-gray-900' : 'text-green-600 hover:text-green-900']">
                                            {{ product.status === 1 ? '下架' : '上架' }}
                                        </button>
                                        <button @click="deleteProduct(product)" class="text-red-600 hover:text-red-900 ml-3">
                                            删除
                                        </button>
                                    </td>
                                </tr>
                                
                                <!-- 无数据提示 -->
                                <tr v-if="filteredProducts.length === 0">
                                    <td colspan="7" class="px-6 py-10 text-center text-sm text-gray-500">
                                        <div class="flex flex-col items-center">
                                            <i class="bi bi-inbox text-4xl text-gray-300 mb-3"></i>
                                            <span>暂无符合条件的商品</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                        <div class="flex-1 flex justify-between sm:hidden">
                            <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                上一页
                            </button>
                            <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                下一页
                            </button>
                        </div>
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">{{ products.length }}</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="bi bi-chevron-left"></i>
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        1
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-indigo-50 text-sm font-medium text-indigo-600 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                        ...
                                    </span>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        8
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="bi bi-chevron-right"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            
            <!-- 底部 -->
            <footer class="bg-white border-t border-gray-200 px-4 py-3">
                <div class="text-center text-sm text-gray-500">
                    © 2023 微信商城后台管理系统 版权所有
                </div>
            </footer>
        </div>
    </div>

    <script>
        const { createApp, ref, computed, reactive, watch } = Vue
        
        createApp({
            setup() {
                // 侧边栏状态
                const isSidebarOpen = ref(false)
                
                // 商品分类
                const categories = ref([
                    { id: 1, name: '手机数码' },
                    { id: 2, name: '电脑办公' },
                    { id: 3, name: '服装鞋包' },
                    { id: 4, name: '食品生鲜' },
                    { id: 5, name: '家居家装' }
                ])
                
                // 商品数据
                const products = ref([
                    {
                        id: 'P001',
                        name: 'iPhone 13 Pro Max',
                        image: 'https://images.unsplash.com/photo-1611472173362-3f53dbd65d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
                        price: 8999,
                        originalPrice: 9999,
                        stock: 150,
                        sales: 320,
                        categoryId: 1,
                        status: 1
                    },
                    {
                        id: 'P002',
                        name: 'MacBook Pro 14"',
                        image: 'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
                        price: 14999,
                        originalPrice: 15999,
                        stock: 80,
                        sales: 125,
                        categoryId: 2,
                        status: 1
                    },
                    {
                        id: 'P003',
                        name: '时尚连衣裙',
                        image: 'https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
                        price: 299,
                        originalPrice: 499,
                        stock: 200,
                        sales: 456,
                        categoryId: 3,
                        status: 1
                    },
                    {
                        id: 'P004',
                        name: '有机草莓',
                        image: 'https://images.unsplash.com/photo-1518635017498-87f514b751ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
                        price: 38.8,
                        originalPrice: null,
                        stock: 50,
                        sales: 789,
                        categoryId: 4,
                        status: 0
                    },
                    {
                        id: 'P005',
                        name: '北欧风沙发',
                        image: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
                        price: 1999,
                        originalPrice: 2499,
                        stock: 30,
                        sales: 68,
                        categoryId: 5,
                        status: 1
                    }
                ])
                
                // 筛选条件
                const searchQuery = ref('')
                const categoryFilter = ref('')
                const statusFilter = ref('')
                
                // 选中商品
                const selectedProducts = ref([])
                const selectAll = ref(false)
                
                // 模态对话框状态
                const modal = reactive({
                    show: false,
                    title: '',
                    message: '',
                    type: 'info', // info, success, warning, danger
                    showCancelButton: false,
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    showForm: false,
                    formData: {
                        id: '',
                        name: '',
                        price: '',
                        originalPrice: '',
                        stock: 0,
                        categoryId: '',
                        image: '',
                        description: '',
                        status: 1
                    }
                })
                
                // 模态对话框样式计算属性
                const getModalHeaderClass = computed(() => {
                    switch (modal.type) {
                        case 'success': return 'text-green-600';
                        case 'warning': return 'text-yellow-600';
                        case 'danger': return 'text-red-600';
                        default: return 'text-gray-900';
                    }
                })
                
                const getModalConfirmButtonClass = computed(() => {
                    switch (modal.type) {
                        case 'success': return 'bg-green-600 hover:bg-green-700';
                        case 'warning': return 'bg-yellow-600 hover:bg-yellow-700';
                        case 'danger': return 'bg-red-600 hover:bg-red-700';
                        default: return 'bg-indigo-600 hover:bg-indigo-700';
                    }
                })
                
                // 过滤后的商品
                const filteredProducts = computed(() => {
                    return products.value.filter(product => {
                        // 搜索条件
                        const searchMatch = searchQuery.value === '' || 
                            product.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                            product.id.toLowerCase().includes(searchQuery.value.toLowerCase())
                        
                        // 分类条件
                        const categoryMatch = categoryFilter.value === '' || product.categoryId.toString() === categoryFilter.value
                        
                        // 状态条件
                        const statusMatch = statusFilter.value === '' || product.status.toString() === statusFilter.value
                        
                        return searchMatch && categoryMatch && statusMatch
                    })
                })
                
                // 获取分类名称
                function getCategoryName(categoryId) {
                    const category = categories.value.find(c => c.id === categoryId)
                    return category ? category.name : '-'
                }
                
                // 切换全选
                function toggleSelectAll() {
                    if (selectAll.value) {
                        selectedProducts.value = filteredProducts.value.map(p => p.id)
                    } else {
                        selectedProducts.value = []
                    }
                }
                
                // 监听选中商品变化，更新全选状态
                watch(selectedProducts, (newVal) => {
                    selectAll.value = newVal.length > 0 && newVal.length === filteredProducts.value.length;
                });
                
                // 批量更新商品状态
                function batchUpdateStatus(status) {
                    if (selectedProducts.value.length === 0) return;
                    
                    showModal({
                        title: status === 1 ? '批量上架' : '批量下架',
                        message: `确定要${status === 1 ? '上架' : '下架'}选中的 ${selectedProducts.value.length} 个商品吗？`,
                        type: 'warning',
                        showCancelButton: true,
                        callback: () => {
                            // 更新选中商品的状态
                            products.value.forEach(p => {
                                if (selectedProducts.value.includes(p.id)) {
                                    p.status = status;
                                }
                            });
                            
                            // 显示成功提示
                            showModal({
                                title: '操作成功',
                                message: `已${status === 1 ? '上架' : '下架'} ${selectedProducts.value.length} 个商品`,
                                type: 'success'
                            });
                            
                            // 清空选中
                            selectedProducts.value = [];
                        }
                    });
                }
                
                // 批量删除商品
                function batchDelete() {
                    if (selectedProducts.value.length === 0) return;
                    
                    showModal({
                        title: '批量删除',
                        message: `确定要删除选中的 ${selectedProducts.value.length} 个商品吗？此操作不可恢复！`,
                        type: 'danger',
                        showCancelButton: true,
                        callback: () => {
                            // 删除选中商品
                            products.value = products.value.filter(p => !selectedProducts.value.includes(p.id));
                            
                            // 显示成功提示
                            showModal({
                                title: '操作成功',
                                message: `已删除 ${selectedProducts.value.length} 个商品`,
                                type: 'success'
                            });
                            
                            // 清空选中
                            selectedProducts.value = [];
                        }
                    });
                }
                
                // 切换侧边栏
                function toggleSidebar() {
                    isSidebarOpen.value = !isSidebarOpen.value
                }
                
                // 切换商品状态
                function toggleStatus(product) {
                    product.status = product.status === 1 ? 0 : 1;
                    
                    // 显示成功提示
                    showModal({
                        title: '操作成功',
                        message: `商品"${product.name}"状态已更新为${product.status === 1 ? '上架' : '下架'}`,
                        type: 'success'
                    })
                }
                
                // 删除单个商品
                function deleteProduct(product) {
                    showModal({
                        title: '删除商品',
                        message: `确定要删除商品"${product.name}"吗？此操作不可恢复！`,
                        type: 'danger',
                        showCancelButton: true,
                        callback: () => {
                            // 从商品列表中移除
                            const index = products.value.findIndex(p => p.id === product.id);
                            if (index !== -1) {
                                products.value.splice(index, 1);
                                
                                // 如果该商品在选中列表中，也从选中列表中移除
                                const selectedIndex = selectedProducts.value.indexOf(product.id);
                                if (selectedIndex !== -1) {
                                    selectedProducts.value.splice(selectedIndex, 1);
                                }
                                
                                // 显示成功提示
                                showModal({
                                    title: '成功',
                                    message: '商品已成功删除',
                                    type: 'success'
                                });
                            }
                        }
                    });
                }
                
                // 编辑商品
                function editProduct(product) {
                    showModal({
                        title: '编辑商品',
                        type: 'info',
                        showForm: true,
                        showCancelButton: true,
                        cancelButtonText: '取消',
                        confirmButtonText: '保存',
                        formData: {
                            id: product.id,
                            name: product.name,
                            price: product.price,
                            originalPrice: product.originalPrice || '',
                            stock: product.stock,
                            categoryId: product.categoryId,
                            image: product.image,
                            description: product.description || '',
                            status: product.status
                        },
                        callback: (formData) => {
                            // 更新商品信息
                            const index = products.value.findIndex(item => item.id === formData.id);
                            if (index !== -1) {
                                products.value[index] = { 
                                    ...products.value[index],
                                    name: formData.name,
                                    price: parseFloat(formData.price),
                                    originalPrice: formData.originalPrice ? parseFloat(formData.originalPrice) : null,
                                    stock: parseInt(formData.stock),
                                    categoryId: formData.categoryId,
                                    image: formData.image,
                                    description: formData.description,
                                    status: parseInt(formData.status)
                                };
                                
                                // 显示成功提示
                                showModal({
                                    title: '成功',
                                    message: '商品信息已更新',
                                    type: 'success'
                                });
                            }
                        }
                    });
                }
                
                // 打开添加商品模态框
                function openAddModal() {
                    showModal({
                        title: '添加商品',
                        type: 'info',
                        showForm: true,
                        showCancelButton: true,
                        cancelButtonText: '取消',
                        confirmButtonText: '添加',
                        formData: {
                            id: '',
                            name: '',
                            price: '',
                            originalPrice: '',
                            stock: 100,
                            categoryId: categories.value[0].id,
                            image: 'https://via.placeholder.com/300',
                            description: '',
                            status: 1
                        },
                        callback: (formData) => {
                            // 生成新的商品ID
                            const newId = 'P' + String(products.value.length + 1).padStart(3, '0');
                            
                            // 添加新商品
                            products.value.push({
                                id: newId,
                                name: formData.name,
                                price: parseFloat(formData.price),
                                originalPrice: formData.originalPrice ? parseFloat(formData.originalPrice) : null,
                                stock: parseInt(formData.stock),
                                categoryId: formData.categoryId,
                                image: formData.image,
                                description: formData.description,
                                status: parseInt(formData.status),
                                sales: 0
                            });
                            
                            // 显示成功提示
                            showModal({
                                title: '成功',
                                message: '商品已添加成功',
                                type: 'success'
                            });
                        }
                    });
                }
                
                // 显示模态框
                function showModal(options) {
                    modal.show = true;
                    modal.title = options.title || '提示';
                    modal.message = options.message || '';
                    modal.type = options.type || 'info';
                    modal.showCancelButton = options.showCancelButton || false;
                    modal.cancelButtonText = options.cancelButtonText || '取消';
                    modal.confirmButtonText = options.confirmButtonText || '确定';
                    modal.showForm = options.showForm || false;
                    
                    if (options.showForm && options.formData) {
                        for (const key in options.formData) {
                            if (Object.prototype.hasOwnProperty.call(modal.formData, key)) {
                                modal.formData[key] = options.formData[key];
                            }
                        }
                    }
                    
                    modal.callback = options.callback || (() => {});
                }
                
                // 确认操作
                function confirmModal() {
                    if (modal.showForm) {
                        // 如果是表单模式，将表单数据传递给回调函数
                        // 表单验证
                        if (!modal.formData.name || !modal.formData.price || !modal.formData.stock) {
                            // 显示错误提示
                            showModal({
                                title: '错误',
                                message: '请填写完整商品信息',
                                type: 'danger'
                            });
                            return;
                        }
                        
                        // 执行回调函数
                        modal.callback(modal.formData);
                    } else {
                        // 普通模式，直接执行回调
                        modal.callback();
                    }
                    
                    // 关闭模态框
                    closeModal();
                }
                
                // 关闭模态框
                function closeModal() {
                    modal.show = false;
                    
                    // 重置表单数据
                    if (modal.showForm) {
                        setTimeout(() => {
                            Object.keys(modal.formData).forEach(key => {
                                if (key === 'stock') {
                                    modal.formData[key] = 0;
                                } else if (key === 'status') {
                                    modal.formData[key] = 1;
                                } else {
                                    modal.formData[key] = '';
                                }
                            });
                        }, 300);
                    }
                }
                
                return {
                    isSidebarOpen,
                    categories,
                    products,
                    searchQuery,
                    categoryFilter,
                    statusFilter,
                    selectedProducts,
                    selectAll,
                    filteredProducts,
                    getCategoryName,
                    toggleSelectAll,
                    toggleSidebar,
                    toggleStatus,
                    deleteProduct,
                    editProduct,
                    openAddModal,
                    batchUpdateStatus,
                    batchDelete,
                    modal,
                    showModal,
                    closeModal,
                    confirmModal,
                    getModalHeaderClass,
                    getModalConfirmButtonClass
                }
            }
        }).mount('#app')
    </script>
</body>
</html> 